<template>
  <div class="app-container">
    <div class="handle-box">
      <el-input v-model="form.query" placeholder="用户名" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
    </div>
    <el-table v-loading="TableListLoading" :data="TableList" element-loading-text="数据加载中..." border fit
              highlight-current-row>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="数据库索引" width="150">
        <template slot-scope="scope">
          {{ scope.row.uid }}
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="310" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="220" align="center">
        <template slot-scope="scope">
          {{ scope.row.creationTime }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="用户状态" width="200" align="center">
        <template slot-scope="scope">
          <el-tag :type="getUsetStateType(scope.row.userState)" v-html="getUsetState(scope.row.userState)"></el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="用户设置" width="400">
        <template slot-scope="scope">
          <template>
            <el-button-group>
              <el-button size="small" @click="openUserConfig(scope.row.uid)">用户设置</el-button>
              <el-button size="small" @click="openUserLoad(scope.row.uid)">设置用户加载器</el-button>
              <el-button size="small">查询用户Lua</el-button>
              <!-- @click="handleDelete(scope.$index, scope.row) 删除-->
            </el-button-group>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" style="margin-top: 15px;">
      <el-pagination background layout="total, prev, pager, next" :current-page="form.pageNum"
                     :page-size="form.pageSize" :total="TableTotal" @current-change="handlePageChange"></el-pagination>
    </div>

    <!-- 用户设置弹窗 -->
    <el-dialog title="用户设置" :visible.sync="dialogFormVisible.userconfig">
      <el-form :model="form">
        <el-form-item label="用户名">
          <el-input v-model="EForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="EForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-input v-model="EForm.userRole" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户余额">
          <el-input v-model="EForm.balance" autocomplete="off"></el-input>
        </el-form-item>
        <el-tag type="">用户状态 1=正常 -1=封禁 -2=冻结</el-tag>
        <el-form-item label="用户状态">
          <el-input v-model="EForm.userState" autocomplete="off"></el-input>
        </el-form-item>
        <el-tag type="">订阅套餐 1=免费 2=个人版 3=出参版 4=定制版</el-tag>
        <el-form-item label="用户套餐">
          <el-input v-model="EForm.subTable" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible.userconfig = false">取 消</el-button>
        <el-button type="primary" @click="runUserUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 用户加载器设置弹窗 -->
    <el-dialog title="用户设置" :visible.sync="dialogFormVisible.userload">
      <el-form :model="form">
        <el-form-item label="用户加载器Token">
          <el-input v-model="EForm.loadToken" autocomplete="off"></el-input>
        </el-form-item>
        <el-tag type="">用户加载器状态 1=正常 2=异常 3=正在生成</el-tag>
        <el-form-item label="用户加载器状态">
          <el-input v-model="EForm.loadLuaStart" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户加载器数据">
          <el-input v-model="EForm.loadLuaData" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible.userload = false">取 消</el-button>
        <el-button type="primary" @click="runUserLoadUpdate">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {
  api_userTable,
  api_userInfo,
  api_setUpdateUserInfo,
  api_userLoaderConfig,
  api_userLoaderConfigUpdate
} from "@/api/user"

export default {
  data() {
    return {
      TableList: null,
      TableListLoading: true,
      TableTotal: 1000,
      form: {
        query: "",
        pageNum: 0,
        pageSize: 10
      },
      EForm: {},
      dialogFormVisible: {
        userconfig: false,
        userload: false
      }
    }
  },
  methods: {
    async initData() {
      const res = await api_userTable(this.form.query, this.form.pageNum, this.form.pageSize)
      if (res === null) return;
      this.TableList = res.data;
      this.TableTotal = res.data_standby;
      this.TableListLoading = false
    },
    getUsetState(sid) {
      if (sid === 1) {
        return "正常"
      } else if (sid === -1) {
        return "封禁"
      } else if (sid === -2) {
        return "冻结"
      } else {
        return "未知"
      }
    },
    getUsetStateType(sid) {
      if (sid === 1) {
        return "success"
      } else if (sid === -1) {
        return "danger"
      } else if (sid === -2) {
        return "warning"
      } else {
        return "info"
      }
    },
    //设置用户加载器
    async runUserLoadUpdate() {
      const res = await api_userLoaderConfigUpdate(this.EForm.uid, this.EForm.loadLuaData, this.EForm.loadLuaStart)
      if (res === null) return;
      this.$message.success(res.msg);
      this.dialogFormVisible.userload = false;
    },
    //设置用户
    async runUserUpdate() {
      const res = await api_setUpdateUserInfo(this.EForm.uid, this.EForm.username, this.EForm.email, this.EForm
        .userRole, this.EForm.balance, this.EForm.userState, this.EForm.subTable)
      if (res === null) return;
      this.$message.success(res.msg);
      this.dialogFormVisible.userconfig = false;
    },
    //打开用户加载器设置
    async openUserLoad(uid) {
      const res = await api_userLoaderConfig(uid)
      if (res === null) return;
      this.EForm = res.data;
      this.EForm.uid = uid;
      this.dialogFormVisible.userload = true;
    },
    //打开用户设置
    async openUserConfig(uid) {
      const res = await api_userInfo(uid)
      if (res === null) return;
      this.EForm = res.data;
      this.EForm.uid = uid;
      this.dialogFormVisible.userconfig = true;
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.form, 'pageNum', val);
      this.initData()
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.form, 'pageNum', 1);
      this.initData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.deleteUser_fun(this.TableList[index].uid);
          this.TableList.splice(index, 1);
        })
        .catch(() => {
        });
      this.initData()
    },
  },
  created() {
    this.initData()
  }
}
</script>

<style>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.c_input {
  margin-top: 20px;
}
</style>
